import React, {useState, useMemo} from 'react';
import {View, StyleSheet, ScrollView, TouchableOpacity} from 'react-native';
import { 
  ResponsiveContainer,
  ResponsiveText,
  scale,
  Sizes 
} from '../components';

const categories = [
  {id: 1, name: '手机数码'},
  {id: 2, name: '电脑办公'},
  {id: 3, name: '家用电器'},
  {id: 4, name: '食品生鲜'},
  {id: 5, name: '美妆护肤'},
  {id: 6, name: '服装鞋包'},
  {id: 7, name: '家居家装'},
  {id: 8, name: '玩具乐器'},
  {id: 9, name: '运动户外'},
  {id: 10, name: '图书音像'},
];

const CategoryScreen = () => {
  const [selectedCategory, setSelectedCategory] = useState(1);

  // 使用 useMemo 缓存子分类数据
  const subCategories = useMemo(() => {
    return Array.from({length: 8}, (_, index) => ({
      id: index + 1,
      name: `子分类${index + 1}`
    }));
  }, []);

  // 使用 useMemo 缓存当前选中的分类名称
  const currentCategoryName = useMemo(() => {
    const category = categories.find(c => c.id === selectedCategory);
    return category ? category.name : '';
  }, [selectedCategory]);

  return (
    <ResponsiveContainer>
      <View style={styles.container}>
        <ScrollView 
          style={styles.leftMenu}
          showsVerticalScrollIndicator={false}>
          {categories.map(category => (
            <TouchableOpacity
              key={category.id}
              style={[
                styles.categoryItem,
                selectedCategory === category.id && styles.selectedCategory,
              ]}
              onPress={() => setSelectedCategory(category.id)}>
              <ResponsiveText
                style={[
                  styles.categoryText,
                  selectedCategory === category.id && styles.selectedCategoryText,
                ]}>
                {category.name}
              </ResponsiveText>
            </TouchableOpacity>
          ))}
        </ScrollView>
        
        <ScrollView 
          style={styles.rightContent} 
          showsVerticalScrollIndicator={false}>
          <ResponsiveText variant="medium" weight="bold" style={styles.subCategoryTitle}>
            {currentCategoryName}分类
          </ResponsiveText>
          <View style={styles.subCategoryList}>
            {subCategories.map(item => (
              <View key={item.id} style={styles.subCategoryItem}>
                <View style={styles.subCategoryImage} />
                <ResponsiveText variant="small" style={styles.subCategoryText}>
                  {item.name}
                </ResponsiveText>
              </View>
            ))}
          </View>
        </ScrollView>
      </View>
    </ResponsiveContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  leftMenu: {
    width: scale(90),
    backgroundColor: '#f5f5f5',
  },
  categoryItem: {
    padding: Sizes.spacingMedium,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  selectedCategory: {
    backgroundColor: '#fff',
    borderLeftWidth: 3,
    borderLeftColor: '#4CAF50',
  },
  categoryText: {
    color: '#333',
  },
  selectedCategoryText: {
    color: '#4CAF50',
    fontWeight: 'bold',
  },
  rightContent: {
    flex: 1,
    backgroundColor: '#fff',
    padding: Sizes.spacingMedium,
  },
  subCategoryTitle: {
    marginBottom: Sizes.spacingMedium,
  },
  subCategoryList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  subCategoryItem: {
    width: '25%',
    alignItems: 'center',
    marginBottom: Sizes.spacingXL,
  },
  subCategoryImage: {
    width: scale(50),
    height: scale(50),
    borderRadius: scale(25),
    backgroundColor: '#e0e0e0',
    marginBottom: Sizes.spacingSmall,
  },
  subCategoryText: {
    color: '#333',
  },
});

export default CategoryScreen; 